<template>
  <div>
    <a-card class="topBox" :bordered="false" style="margin-bottom: 10px">
      <!-- 查询区域 -->
      <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
        <a-row>
          <a-col :span="6">
            <a-form-model-item label="工种名称">
              <a-input v-model="pageFilter.name" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="培训等级">
              <a-select v-model="pageFilter.trainLevel" placeholder="请选择" style="width:100%;">
                <a-select-option value="1">初级</a-select-option>
                <a-select-option value="2">中级</a-select-option>
                <a-select-option value="3">高级</a-select-option>
                <a-select-option value="4">技师</a-select-option>
                <a-select-option value="5">高级技师</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="培训类别">
              <a-select v-model="pageFilter.trainCategory" placeholder="请选择" style="width:100%;">
                <a-select-option value="1">A</a-select-option>
                <a-select-option value="2">B</a-select-option>
                <a-select-option value="3">C</a-select-option>
                <a-select-option value="4">D</a-select-option>
                <a-select-option value="5">E</a-select-option>
                <a-select-option value="6">F</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-button type="primary" @click="onQuery"> 查询 </a-button>
              <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="onOut()">导出</a-button>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading" :columns="columns"
          :dataSource="pageData" @change="onTableChange">
          <template slot="trainLevel" slot-scope="text,">
            <span v-if="text == '1'">初级</span>
            <span v-if="text == '2'">中级</span>
            <span v-if="text == '3'">高级</span>
            <span v-if="text == '4'">技师</span>
            <span v-if="text == '5'">高级技师</span>
          </template>
          <template slot="trainCategory" slot-scope="text,">
            <span v-if="text == '1'">A</span>
            <span v-if="text == '2'">B</span>
            <span v-if="text == '3'">C</span>
            <span v-if="text == '4'">D</span>
            <span v-if="text == '5'">E</span>
            <span v-if="text == '6'">F</span>
          </template>
        </z-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import * as trainingApi from '@/api/sjsk/help/training.js'
import { downLoadFileReader } from '@/utils/export-util/util'
export default {
  components: {},
  data() {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
      loading: false,
      reloading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '名称',
          dataIndex: 'name',
          align: 'center',
        },
        {
          title: '培训等级',
          dataIndex: 'trainLevel',
          align: 'center',
          scopedSlots: { customRender: 'trainLevel' },
        },
        {
          title: '标准课时数',
          dataIndex: 'standardClass',
          align: 'center',
        },
        {
          title: '培训类别',
          dataIndex: 'trainCategory',
          align: 'center',
          scopedSlots: { customRender: 'trainCategory' },
        },
        {
          title: '职业（工种）大类',
          dataIndex: 'staff',
          align: 'center',
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
    }
  },
  created() { },
  async mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10
      }
      this.refreshTable()
    },
    onTimeChange() {

    },
    onStatusChange() {

    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      trainingApi
        .viewTrainProgram(this.pageFilter)
        .then((res) => {
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.loading = false
          } else {
            this.$message.warn(res.message)
            this.loading = false
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onOut() {
      trainingApi.exportTrainProgram(this.pageFilter).then(async res => {
        const fileName = '培训目录.xls'
        await downLoadFileReader(res, fileName)
      })
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
  },
}
</script>
<style lang="less" scoped>
.topBox /deep/.ant-row {
  margin-bottom: 0;
}
</style>
